<template>
  <el-dialog title="创建用户" :visible.sync="showDialog" @close="close">
    <el-form
      style="width: 500px"
      v-if="showDialog"
      label-width="200px"
      :model="formData"
      :rules="formRules"
      ref="form"
    >
      <el-form-item label="角色名称" prop="username">
        <el-input
          v-model="formData.username"
          size="small"
          placeholder="请输入角色名称"
        ></el-input>
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input
          v-model="formData.email"
          size="small"
          placeholder="请输入邮箱"
        ></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input
          v-model="formData.password"
          size="small"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>

      <el-form-item label="角色" prop="role">
        <el-input v-model="formData.role" size="small"></el-input>
      </el-form-item>
      <el-form-item label="权限组名称" prop="title">
        <el-select
          v-model="formData.permission_group_id"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in titles"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="联系电话" prop="phone">
        <el-input
          v-model="formData.phone"
          size="small"
          placeholder="号码"
        ></el-input>
      </el-form-item>
      <el-form-item label="介绍" prop="introduction">
        <el-input
          v-model="formData.introduction"
          rows="5"
          type="textarea"
          size="small"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>

      <el-row type="flex" justify="end">
        <!--  // 4 事件提交逻辑 【新增功能】 -->
        <el-button size="small" @click="close">取消</el-button>
        <el-button type="primary" size="small" @click="btnOK">确定</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import { addUserApi, editUserApi } from "@/api/User";
import { getPermissionsListApi } from "@/api/Permissions";
export default {
  name: "addUser",
  data() {
    return {
      queryData: {
        page: 1,
        pagesize: 10,
        title: "",
      },
      titles: [],
      showDialog: false,
      formData: {
        username: "",
        email: "",
        password: "",
        role: "",
        permission_group_id: "",
        phone: "",
        introduction: "",
        sex: 1,
      },
      formRules: {},
      formRules: {
        username: [{ required: true, message: "请输入名称", trigger: "blur" }],
        email: [{ required: true, message: "请选择邮箱", trigger: "blur" }],
        password: [{ required: true, message: "请选择密码", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getPermissionsList();
  },
  methods: {
    async btnOK() {
      try {
        await this.$refs.form.validate();
      } catch (error) {
        return console.log(error);
      }
      if (this.formData.id) {
        console.log(this.formData);

        console.log(this.formData.id);
        await editUserApi(this.formData);
        this.$message.success("编辑成功");
        this.$emit("updateList");
        this.showDialog = false;
      } else {
        await addUserApi(this.formData);
        this.$message.success("新增成功");
        this.$emit("updateList");
        this.showDialog = false;
      }
    },

    // 获取权限组
    async getPermissionsList() {
      let { list } = await getPermissionsListApi(this.queryData);
      //   console.log(res);
      this.titles = list;
      console.log(this.titles);
    },

    // 关闭
    close() {
      this.formData = {};
      this.showDialog = false;
    },
  },
};
</script>

<style>
</style>